import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import React, { Suspense, lazy } from 'react';
import PropsRender from '../pages/PropsRender';

const Home = lazy(() => import('../pages/Home'));
const About = lazy(() => import('../pages/About'));
const Calculator = lazy(() => import('../pages/Calculator'));
const Invoices = lazy(() => import('../components/invoices'));

export default function LazyRouter() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/calculator" component={Calculator} />
          <Route path="/invoices" component={Invoices} />
          <Route path="/propsrender" component={PropsRender} />
        </Switch>
      </Suspense>
    </Router>
  );
}
